<script setup lang="ts">

import {reactive, ref, toRefs} from "vue";

/*ref使用*/
const count = ref(0);

/*reactive使用*/
type User = {
  name: string;
  age: number;
  desc: string;
}

const user: User = reactive({
  name: 'hy',
  age: 22,
  desc: 'A programmer',
})

//解构使用  toRefs  解构语句
const {age, desc} = {...toRefs(user)}


/*方法实现*/
const add = () => {
  count.value++;
}

const reduce = () => {
  if (count.value !== 0) {
    count.value--;
  }
}

</script>

<template>
  <h1>ref和reactive使用</h1>
  <hr/>
  <div class="refAnfdReactive">
    <p>姓名：{{ user.name }}</p>
    <!--    解构后的使用  直接用参数名-->
    <p>年龄：{{ age }}</p>
    <p>描述：{{ desc }}</p>
    <p>计数：{{ count }}</p>
    <div class="bth">
      <button @click="add">增加</button>
      <button @click="reduce">减少</button>
    </div>
  </div>
</template>

<style scoped>
.bth > button {
  margin-right: 10px;
}
</style>